<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto">
      <el-form-item label="所属类" prop="classesId">
        <el-select v-model="queryParams.classesId" clearable size="small">
          <el-option
            v-for="classes in classesOptions"
            :key="classes.value"
            :label="classes.label"
            :value="parseInt(classes.value)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="中文名称" prop="nameZh">
        <el-input
          v-model="queryParams.nameZh"
          placeholder="请输入中文名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="英文名称" prop="nameEn">
        <el-input
          v-model="queryParams.nameEn"
          placeholder="请输入英文名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否多值" prop="multiValued">
        <el-select v-model="queryParams.multiValued" placeholder="请选择是否多值" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否必填" prop="required">
        <el-select v-model="queryParams.required" placeholder="请选择是否必填" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否建立索引" prop="indexed">
        <el-select v-model="queryParams.indexed" placeholder="请选择是否建立索引" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否分词" prop="participle">
        <el-select v-model="queryParams.participle" placeholder="请选择是否分词" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否分面字段" prop="faceted">
        <el-select v-model="queryParams.faceted" placeholder="请选择是否分面字段" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否排序字段" prop="sortField">
        <el-select v-model="queryParams.sortField" placeholder="请选择是否排序字段" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否前台列表页显示" prop="webListShow">
        <el-select v-model="queryParams.webListShow" placeholder="请选择是否前台列表页显示" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否前台详情页显示" prop="webDetailShow">
        <el-select v-model="queryParams.webDetailShow" placeholder="请选择是否前台详情页显示" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否后台列表页显示" prop="adminListShow">
        <el-select v-model="queryParams.adminListShow" placeholder="请选择是否后台列表页显示" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否后台详情页显示" prop="adminDetailShow">
        <el-select v-model="queryParams.adminDetailShow" placeholder="请选择是否后台详情页显示" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否普通检索字段" prop="generalSearchField">
        <el-select v-model="queryParams.generalSearchField" placeholder="请选择是否普通检索字段" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否高级检索字段" prop="advancedSearchField">
        <el-select v-model="queryParams.advancedSearchField" placeholder="请选择是否高级检索字段" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否标红字段" prop="highlightingField">
        <el-select v-model="queryParams.highlightingField" placeholder="请选择是否标红字段" clearable size="small">
          <el-option
            v-for="dict in dict.type.business_whether"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:dataProperty:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:dataProperty:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:dataProperty:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['system:dataProperty:export']"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-help"
          size="mini"
          @click="toDynamic"
        >前往资源管理
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dataPropertyList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" align="center" type="index"/>
      <el-table-column label="ID" align="center" prop="id"/>
      <el-table-column label="中文名称" align="center" prop="nameZh"/>
      <el-table-column label="英文名称" align="center" prop="nameEn"/>
      <el-table-column label="是否多值" align="center" prop="multiValued">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_whether" :value="scope.row.multiValued"/>
        </template>
      </el-table-column>
      <el-table-column label="是否必填" align="center" prop="required">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_whether" :value="scope.row.required"/>
        </template>
      </el-table-column>
      <el-table-column label="是否建立索引" align="center" prop="indexed">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_whether" :value="scope.row.indexed"/>
        </template>
      </el-table-column>
      <el-table-column label="是否普通检索字段" align="center" prop="generalSearchField">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_whether" :value="scope.row.generalSearchField"/>
        </template>
      </el-table-column>
      <el-table-column label="是否高级检索字段" align="center" prop="advancedSearchField">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_whether" :value="scope.row.advancedSearchField"/>
        </template>
      </el-table-column>
      <el-table-column label="是否分面字段" align="center" prop="faceted">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_whether" :value="scope.row.faceted"/>
        </template>
      </el-table-column>
      <el-table-column label="是否标红字段" align="center" prop="highlightingField">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_whether" :value="scope.row.highlightingField"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:dataProperty:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:dataProperty:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改基础字段对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="50%" :close-on-click-modal="false" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="auto" label-position="top">

        <el-divider content-position="center">基础信息配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="中文名称" prop="nameZh">
              <el-input v-model="form.nameZh" placeholder="请输入中文名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文名称" prop="nameEn">
              <el-input v-model="form.nameEn" placeholder="请输入英文名称" @change="nameEnWatch"
                        :disabled="editDisabled || commonDataPropertyDisabled"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input v-model="form.sort" placeholder="请输入排序"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属类" prop="classesId">
              <el-select v-model="form.classesId" clearable :disabled="true">
                <el-option
                  v-for="classes in classesOptions"
                  :key="classes.value"
                  :label="classes.label"
                  :value="parseInt(classes.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公用字段" prop="commonDataPropertyId">
              <el-select v-model="form.commonDataPropertyId" placeholder="请选择公用字段" @change="commonDataPropertyIdWatch"
                         :disabled="editDisabled" clearable>
                <el-option
                  v-for="item in commonDataPropertyOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据类型" prop="dataTypeId">
              <el-select v-model="form.dataTypeId" placeholder="请选择数据类型" @change="dataTypeIdWatch"
                         :disabled="editDisabled || commonDataPropertyDisabled">
                <el-option
                  v-for="dataType in dataTypeOptions"
                  :key="dataType.value"
                  :label="dataType.label"
                  :value="parseInt(dataType.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="关联字典类" prop="dictId">
              <el-select v-model="form.dictId" placeholder="请选择关联字典类"
                         :disabled="editDisabled || dictIdDisabled || commonDataPropertyDisabled">
                <el-option
                  v-for="dict in dictOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段长度" prop="fieldLength">
              <el-input v-model="form.fieldLength" placeholder="请输入字段长度"
                        :disabled="editDisabled || fieldLengthDisabled"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否多值" prop="multiValued">
              <el-select v-model="form.multiValued" placeholder="请选择是否多值" @change="multiValuedWatch"
                         :disabled="editDisabled || commonDataPropertyDisabled">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否必填" prop="required">
              <el-select v-model="form.required" placeholder="请选择是否必填">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否可编辑" prop="allowModification">
              <el-select v-model="form.allowModification" placeholder="请选择是否可编辑">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="表单验证规则" prop="formValidationRegulation">
              <span slot="label">
                <el-tooltip placement="top">
                  <div slot="content">
                    表单验证规则：
                    <br>不为空：*
                    <br>正则校验(正则与提示语以::分割)：/^[1-9]\d*$/::只允许正整数
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
                表单验证规则
              </span>
              <el-input v-model="form.formValidationRegulation" placeholder="请输入表单验证规则"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="分隔符" prop="separator" v-if="form.multiValued == 1">
              <el-input v-model="form.separator" placeholder="请输入分隔符"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>

        <el-divider content-position="center">后台管理配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否后台列表页显示" prop="adminListShow">
              <el-select v-model="form.adminListShow" placeholder="请选择是否后台列表页显示">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否后台详情页显示" prop="adminDetailShow">
              <el-select v-model="form.adminDetailShow" placeholder="请选择是否后台详情页显示">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否后台查询字段" prop="indexed">
              <el-select v-model="form.adminSearchField" placeholder="请选择是否后台查询字段">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>

        <el-divider content-position="center">搜索引擎配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否建立索引" prop="indexed">
              <el-select v-model="form.indexed" placeholder="请选择是否建立索引"
                         :disabled="editDisabled || commonDataPropertyDisabled">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否内容存储" prop="stored">
              <el-select v-model="form.stored" placeholder="请选择是否内容存储"
                         :disabled="editDisabled || commonDataPropertyDisabled">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否分词" prop="participle">
              <el-select v-model="form.participle" placeholder="请选择是否分词"
                         :disabled="editDisabled || commonDataPropertyDisabled">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="center">前台检索配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否普通检索字段" prop="generalSearchField">
              <el-select v-model="form.generalSearchField" placeholder="请选择是否普通检索字段">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否高级检索字段" prop="advancedSearchField">
              <el-select v-model="form.advancedSearchField" placeholder="请选择是否高级检索字段">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否分面字段" prop="faceted">
              <el-select v-model="form.faceted" placeholder="请选择是否分面字段">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否排序字段" prop="sortField">
              <el-select v-model="form.sortField" placeholder="请选择是否排序字段">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否前台列表页显示" prop="webListShow">
              <el-select v-model="form.webListShow" placeholder="请选择是否前台列表页显示">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否前台详情页显示" prop="webDetailShow">
              <el-select v-model="form.webDetailShow" placeholder="请选择是否前台详情页显示">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否标红字段" prop="highlightingField">
              <el-select v-model="form.highlightingField" placeholder="请选择是否标红字段">
                <el-option
                  v-for="dict in dict.type.business_whether"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {
        listDataProperty,
        getDataProperty,
        delDataProperty,
        addDataProperty,
        updateDataProperty,
        exportDataProperty,
        addRemovingRepeat
    } from "@/api/system/dataProperty";
    import {listClasses} from "@/api/system/classes";
    import {listDataType} from "@/api/system/dataType"
    import {listCommonDataProperty} from "@/api/system/commonDataProperty"
    import {listType} from "@/api/system/dict/type"

    export default {
        name: "DataProperty",
        dicts: ['business_whether'],
        data() {
            return {
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 基础字段表格数据
                dataPropertyList: [],
                // 公共字段选项
                commonDataPropertyOptions: [],
                // 字段类型
                dataTypeOptions: [],
                // 字典选项
                dictOptions: [],
                // 类选择
                classesOptions: [],
                //默认classesid
                defaultClassesId: "",
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    nameZh: null,
                    nameEn: null,
                    classesId: null,
                    multiValued: null,
                    required: null,
                    indexed: null,
                    participle: null,
                    faceted: null,
                    sortField: null,
                    webListShow: null,
                    webDetailShow: null,
                    adminListShow: null,
                    adminDetailShow: null,
                    generalSearchField: null,
                    advancedSearchField: null,
                    highlightingField: null
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    nameZh: [
                        { required: true,   message: '请输入中文名称', trigger: 'blur' },
                    ],
                    nameEn: [
                        { required: true,   message: '请输入英文名称', trigger: 'blur' },
                        { pattern: /^[a-z_]+$/,
                            message: "只允许小写字母、下划线组合",
                            trigger: "blur"
                        }
                    ],
                    sort: [
                        { required: true,   message: '请输入排序', trigger: 'blur' },
                        { pattern: /^[1-9]\d*$/,
                            message: "只允许正整数排序值",
                            trigger: "blur"
                        }
                    ],
                    fieldLength: [
                        { required: true,   message: '请输入字段长度', trigger: 'blur' },
                        { pattern: /^[0-9]\d*$/,
                            message: "字段长度必须为整数",
                            trigger: "blur"
                        }
                    ],
                    dataTypeId: [
                        {required: true, message: '请选择数据类型', trigger: ['blur', 'change']},
                    ],
                },
                //
                dictIdDisabled: true,
                fieldLengthDisabled: false,
                commonDataPropertyDisabled: false,
                editDisabled: false,
            };
        },
        watch: {},
        created() {

            const classesId = this.$route.params && this.$route.params.classesId;
            if (classesId) {
                this.queryParams.classesId = parseInt(classesId);
                this.defaultClassesId = parseInt(classesId);
            }
            this.getList();

            listDataType({}).then(response => {
                this.dataTypeOptions = response.rows.map(item => {
                    return {
                        "value": item.id,
                        "label": item.nameZh
                    }
                });
            });

            listType({}).then(response => {
                this.dictOptions = response.rows.map(item => {
                    return {
                        "value": item.dictId,
                        "label": item.dictName
                    }
                });
            });

            listClasses({}).then(response => {
                this.classesOptions = response.rows.map(item => {
                    return {
                        "value": item.id,
                        "label": item.nameZh
                    }
                });
            });

            listCommonDataProperty({}).then(response => {
                this.commonDataPropertyOptions = response.rows.map(item => {
                    return {
                        "value": item.id,
                        "label": item.nameZh,
                        ...item
                    }
                });
            });
        },
        methods: {
            toDynamic() {
                this.$router.push('/knowledgeBaseManagement/dynamic/' + this.defaultClassesId)
            },
            /** 查询基础字段列表 */
            getList() {
                this.loading = true;
                listDataProperty(this.queryParams).then(response => {
                    this.dataPropertyList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    nameZh: null,
                    nameEn: null,
                    commonDataPropertyId: null,
                    classesId: null,
                    dataTypeId: null,
                    separator: null,
                    fieldLength: null,
                    dictId: null,
                    multiValued: "0",
                    required: "0",
                    indexed: "1",
                    stored: "1",
                    participle: "0",
                    faceted: "0",
                    sortField: "0",
                    webListShow: "0",
                    webDetailShow: "1",
                    adminListShow: "0",
                    adminDetailShow: "1",
                    adminSearchField: "0",
                    formValidationRegulation: null,
                    sort: null,
                    generalSearchField: "1",
                    advancedSearchField: "1",
                    highlightingField: "1",
                    allowModification: "1"
                };
                this.resetForm("form");

                this.dictIdDisabled = true;
                this.fieldLengthDisabled = false;
                this.commonDataPropertyDisabled = false;
                this.editDisabled = false;
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.queryParams.classesId = this.defaultClassesId;
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.editDisabled = false;
                this.title = "添加基础字段";
                this.form.classesId = this.queryParams.classesId;
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids
                getDataProperty(id).then(response => {
                    this.form = response.data;
                    if (this.form.dictId == 0) {
                        this.form.dictId = null;
                    }
                    if (this.form.commonDataPropertyId == 0) {
                        this.form.commonDataPropertyId = null;
                    }
                    this.open = true;
                    this.editDisabled = true;
                    this.title = "修改基础字段";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateDataProperty(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addDataProperty(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    } else {
                        this.$modal.msgWarning("请正确完善表单信息")
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认删除基础字段编号为"' + ids + '"的数据项？').then(function () {
                    return delDataProperty(ids);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$modal.confirm('是否确认导出所有基础字段数据项？').then(() => {
                    this.exportLoading = true;
                    return exportDataProperty(queryParams);
                }).then(response => {
                    this.$download.name(response.msg);
                    this.exportLoading = false;
                }).catch(() => {
                });
            },

            multiValuedWatch() {
                let newVal = this.form.multiValued;
                if (newVal == 0) {
                    this.form.separator = "";
                }
            },
            nameEnWatch() {
                if (this.form.nameEn) {
                    addRemovingRepeat(this.form.nameEn, 0, this.defaultClassesId).then(response => {
                        if (response.msg != "success") {
                            this.$modal.msgWarning(response.msg);
                            this.form.nameEn = "";
                        }
                    });
                }
            },
            // 公共字段改变
            commonDataPropertyIdWatch() {
                let newVal = this.form.commonDataPropertyId;
                if (newVal && newVal > 0) {
                    let commonDataProperTyItem = this.commonDataPropertyOptions.filter(x => x.id == newVal)[0];
                    addRemovingRepeat(commonDataProperTyItem.nameEn, newVal, this.defaultClassesId).then(response => {
                        if (response.msg == "success") {
                            this.commonDataPropertyIdRender();
                        } else {
                            this.$modal.msgWarning(response.msg);
                            this.form.commonDataPropertyId = null;
                        }
                    });
                } else {
                    this.commonDataPropertyDisabled = false;
                }
            },
            //公共字段渲染
            commonDataPropertyIdRender() {
                this.commonDataPropertyDisabled = true;
                let commonDataProperTyItem = this.commonDataPropertyOptions.filter(x => x.id == this.form.commonDataPropertyId)[0];
                this.form.nameEn = commonDataProperTyItem.nameEn;
                this.form.fieldLength = commonDataProperTyItem.fieldLength;
                this.form.dataTypeId = commonDataProperTyItem.dataTypeId;
                this.form.dictId = commonDataProperTyItem.dictId;
                this.form.multiValued = commonDataProperTyItem.multiValued;
                this.form.participle = commonDataProperTyItem.participle;
                this.form.required = commonDataProperTyItem.required;
                this.form.stored = commonDataProperTyItem.stored;
                this.form.indexed = commonDataProperTyItem.indexed;
                this.form.generalSearchField = commonDataProperTyItem.generalSearchField;
                this.form.advancedSearchField = commonDataProperTyItem.advancedSearchField;
                this.form.faceted = commonDataProperTyItem.faceted;
                this.form.highlightingField = commonDataProperTyItem.highlightingField;
            },
            dataTypeIdWatch() {
                let newVal = this.form.dataTypeId;
                if (newVal == 2 || newVal == 3) {
                    //文本域和富文本框
                    this.form.dictId = "";
                    this.dictIdDisabled = true;

                    this.form.fieldLength = 0;
                    this.fieldLengthDisabled = true;
                } else if (newVal == 4 || newVal == 5) {
                    //下拉
                    this.dictIdDisabled = false;
                    this.form.fieldLength = 200;
                    this.fieldLengthDisabled = false;
                } else {
                    this.form.dictId = "";
                    this.dictIdDisabled = true;
                    this.form.fieldLength = 200;
                    this.fieldLengthDisabled = false;
                }
            }
        }
    };
</script>
<style>
  .el-form-item .el-select {
    width: 100%;
  }

  .el-form .el-divider__text {
    font-size: 120%;
    font-weight: bolder;
    color: #009688;
  }

  .el-form--label-top .el-form-item__label {
    padding: 0 !important;
  }

  .el-row {
    margin-bottom: 0px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
  }

</style>
